<template>
    <div>

        <div style="margin: 10px 0">
            <el-input style="width: 250px" placeholder="农物名称" suffix-icon="el-icon-search" class="ml-5" v-model="agricultureName"></el-input>
            <el-input style="width: 250px" placeholder="产出地" suffix-icon="el-icon-edit" class="ml-5" v-model="productionAddress"></el-input>
            <el-input style="width: 250px" placeholder="商家电话" suffix-icon="el-icon-message" class="ml-5" v-model="iphone"></el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button class="ml-5" type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定删除吗？"
                    @confirm="delBatch"
            >
                <el-button type="danger"  slot="reference" >批量删除</el-button>
            </el-popconfirm>
            <!--<el-upload
                    action="http://localhost:8081/house/import"
                    :show-file-list=false
                    :accept="'xlsx'"
                    :on-success="importSuccess"
                    style="display: inline-block"
            >
                <el-button type="primary" class="ml-5"  >导入</el-button>
            </el-upload>

            <el-button type="primary" @click="exp" class="ml-5">导出Excel模板</el-button>-->
        </div>

        <el-table :data="tableData" border stripe :header-row-class-name="headerBg" @selection-change="handleSelectionChange">  //border stripe把表格变成斑马线风格
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="编号" width="70"></el-table-column>
            <el-table-column prop="agricultureName" label="农物名称" width="120"></el-table-column>
            <el-table-column prop="number" label="数量" width="120"></el-table-column>
            <el-table-column prop="productionAddress" label="产出地"></el-table-column>
            <el-table-column prop="price" label="单价"></el-table-column>
            <el-table-column prop="uploadBy" label="上架商家" width="80"></el-table-column>
            <el-table-column prop="variety" label="归属品种" width="100"></el-table-column>
            <el-table-column prop="iphone" label="商家联系电话" width="250"></el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定删除吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>

                    <el-button class="ml-5"  type="warning" @click="details(scope.row)">查看详情</el-button>
                    <el-dialog
                            title="提示"
                            :visible.sync="dialogVisible"
                            width="80%"
                            :before-close="handleClose"
                    >
                        <el-descriptions title="农物信息">
                            <el-descriptions-item label="ID">{{form.id}}</el-descriptions-item>
                            <el-descriptions-item label="农物名称">{{form.agricultureName}}</el-descriptions-item>
                            <el-descriptions-item label="数量">{{form.number}}</el-descriptions-item>
                            <el-descriptions-item label="产出地">{{form.productionAddress}}</el-descriptions-item>>
                            <el-descriptions-item label="单格">{{form.price}}</el-descriptions-item>
                            <el-descriptions-item label="上架商家">{{form.uploadBy}}</el-descriptions-item>
                            <el-descriptions-item label="上架时间">{{form.uploadTime}}</el-descriptions-item>
                            <el-descriptions-item label="归属品种">{{form.variety}}</el-descriptions-item>
                            <el-descriptions-item label="商家联系电话">{{form.iphone}}</el-descriptions-item>
                        </el-descriptions>


                        <span slot="footer" class="dialog-footer">
                         <el-button @click="dialogVisible = false">取 消</el-button>
                         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                         </span>
                    </el-dialog>

                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="肉蛋信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form" :rules="rules" label-width="80px" size="small">
                <el-form-item label="农物名称" prop="agricultureName"> <!-- 不加prop设置校验名则无法用此方法校验-->
                    <el-input v-model="form.agricultureName" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="number">
                    <el-input v-model="form.number" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产出地">
                    <el-input v-model="form.productionAddress" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="form.price" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="归属品种" prop="variety">
                    <el-select v-model="form.variety" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商家联系电话" prop="iphone">
                    <el-input v-model="form.iphone" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
name: "Meat",
    data(){
        const checkPhone = (rule, value, callback) => {
                if (value) {
                    var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                    if (reg.test(value) === false) {
                        callback(new Error('只可输入英文数字和下划线'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
                }
       return{
           tableData: [],
           total: 0,
           pageNum: 1,   //点进来默认的页数和条数
           pageSize: 5,
           Id: "",
           agricultureName: "",
           productionAddress: "",
           iphone:"",
           form: {
               Id: '',
               agricultureName: '',
               number:'',
               productionAddress: '',
               price: '',
               uploadBy: '',
               uploadTime:'',
               variety:'',
               iphone:''
           },
           rules: {
               iphone: [
                   {required: true, message: '请输入正确手机号', validator: checkPhone},
               ],
               price: [
                   {pattern: /^[1-9]\d*(.\d{1,2})?$/, message: '请输正确价格', trigger: 'blur'},
                   {required: true, message: '请输入产品单价', trigger: 'blur'},
               ],
               agricultureName: [
                   {required: true, message: '请输入产品名称', trigger: 'blur'},
                   {min: 1, max: 15, message: '名称在1到15个中文之间', trigger: 'blur'}
               ],
               variety:[
                   {required: true, message: '请选择产品分类', trigger: 'blur'},
               ],
               number:[
                   {pattern: /^[1-9]\d*$/, message: '请输正确价格', trigger: 'blur'},
                   {required: true, message: '请输入上架数量', trigger: 'blur'}
               ]
           },
           dialogFormVisible: false,
           multipleSelection: [],
           headerBg: "headerBg",
           dialogVisible: false,
           options: [{
               value: '活禽肉蛋',
               label: '活禽肉蛋'
           }, {
               value: '果蔬五谷',
               label: '果蔬五谷'
           },{
               value: '海鲜干货',
               label: '海鲜干货'
           }],
       }

    },
    created() {
        //请求分页查询数据
        this.load();
    },
    methods:{
        load(){     //封装请求分页查询方法，让其他地方调用
            this.request.get("/agriculture/list",{
                params: {   //筛选条件
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    Id: this.Id,
                    agricultureName: this.agricultureName,
                    productionAddress: this.productionAddress,
                    iphone: this.iphone,
                    variety: "活禽肉蛋",
                    uploadBy:localStorage.getItem("userName")
                }
            }).then(res =>{
                this.tableData=res.data.rows
                this.total=res.data.total
            })
        },
        handleInputOpenValue(e) {
            this.$forceUpdate();
        },
        save(){
            this.form.uploadBy=localStorage.getItem("userName");
            if (this.form.id===''||this.form.id===undefined){
                this.request.post("/agriculture/create",this.form).then(res => {
                    if (res){
                        console.log("cccc",res.data)
                        if (res.data=='fail'){
                            this.$message.warning("仓库无该农产品")
                            this.dialogFormVisible=false  //新增完关闭弹窗
                            this.load()
                        }else if (res.data=='less'){
                            this.$message.warning("上架数量超过仓库数量")
                            this.dialogFormVisible=false  //新增完关闭弹窗
                            this.load()
                        }else {
                            this.$message.success("新增成功")
                            this.dialogFormVisible=false  //新增完关闭弹窗
                            this.load()
                        }
                    }else {
                        this.$message.fail("新增失败")
                    }
                })
            }else {
                this.request.post("/agriculture/update",this.form).then(res => {
                    if (res){
                        this.$message.success("修改成功")
                        this.dialogFormVisible=false  //新增完关闭弹窗
                        this.load()
                    }else {
                        this.$message.fail("修改失败")
                    }
                })
            }
        },
        handleAdd(){   //新增打开表单默认为空
            this.dialogFormVisible=true
            this.form= {}
        },
        handleEdit(row){   //编辑打开为form里面的数据
            console.log(row)
            this.form= row
            this.dialogFormVisible=true
        },
        del(id){
            this.request.post("/agriculture/delete",id).then(res=>{
                if (res){
                    this.$message.success("删除成功")
                    this.load()
                }else {
                    this.$message.fail("删除失败")
                }
            })
        },
        delBatch(){
            let ids= this.multipleSelection.map(e=>e.id).join()
            this.request.post("/agriculture/delete",ids).then(res=>{
                if (res){
                    this.$message.success("删除成功")
                    this.load()
                }else {
                    this.$message.fail("删除失败")
                }
            })
        },
        reset(){  //重置
            this.agricultureName=""
            this.productionAddress=""
            this.iphone=""
            this.load()
        },

        handleSelectionChange(val){

            this.multipleSelection=val
            console.log(val)
        },
        handleSizeChange(pageSize){     //点击触发分页跳转,pageSize是web点击后传过来的
            console.log(pageSize)
            this.pageSize=pageSize
            this.load()
        },
        handleCurrentChange(pageNum){
            console.log(pageNum)
            this.pageNum=pageNum
            this.load()
        },
        importSuccess(){
            this.$message.success("文件导入成功")
            this.load()
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        details(row){
            this.dialogVisible = true
            this.form = row
        },
        exp(){
            window.open("http://localhost:8081/house/excel")
        }
    }
}
</script>

<style>
    .headerBg{
        background: #cccccc !important;
    }
</style>
